<template>
  <div class="yingxiaohuodong" v-if="list.length">
    <div class="rechange-div">
      <div>
        <div v-for="(item, index) in list" :key="index">
          <div
            class="cartory-name"
            v-if="item && module.modules  &&  module.modules[0].biz.params.enableActivityTypeTitle"
          >
            {{ item[0].activityType | activityType }}
          </div>

          <div v-for="sItem in item" :key="sItem.id" class="activity-item">
            <img
              :src="fileBaseUrl + sItem.image"
              style="height: 120px"
              class="pic-img"
            />
            <div style="padding-left: 15px">
              <div class="activity-name">{{ sItem.theme }}</div>
              <div class="activity-time">
                {{ sItem.startTime }} - {{ sItem.endTime }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <ModuleNotConfig :module="module" text="自动获取配置请在小程序查看" v-else />
</template>

<script>
import { getActivityListByIds } from "@/api/marketing";
export default {
  props: {
    module: {
      type: Object,
    },
    fileBaseUrl: {
      type: String,
    },
  },
  filters: {
    activityType(activityType) {
      const source = {
        1: "消费满额赠礼",
        2: "支付后返零钱",
        3: "支付后返微信红包",
        4: "领券活动",
        5: "单品立减",
        6: "单品买N送M",
        7: "单品折扣",
        8: "单品减至固定优惠价",
      };
      return source[activityType];
    },
  },
  data() {
    return {
      list: [],
    };
  },
  watch: {
    module: {
      handler() {
        if (!this.module.modules || !this.module.modules[0] || !this.module.modules[0].biz) return;
        const ids = this.module.modules[0].biz.params.activityIds;
        if (ids && ids.length) {
          this.getActivityListByIds(ids);
        } else {
          this.list = [];
        }
      },
      deep: true,
      immediate: true,
    },
  },
  mounted() {
    if (!this.module.modules || !this.module.modules[0]) return;
    const ids = this.module.modules[0].biz.params.activityIds;
    if (ids && ids.length) {
      this.getActivityListByIds(ids);
    } else {
      this.list = [];
    }
  },
  methods: {
    getActivityListByIds(ids) {
      getActivityListByIds(ids).then((res) => {
        const list = [];
        res.data.forEach((item) => {
          if (!Array.isArray(list[item.activityType])) {
            list[item.activityType] = [item];
            return;
          }
          list[item.activityType].push(item);
        });
        this.list = list;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.rechange-div {
  padding: 0px 10px 3px 10px;
}
.detail-page {
  overflow: hidden;
  .detail-page-img {
    border-radius: 10px;
  }
  margin-bottom: 16px;
}
.rechange {
  flex-wrap: wrap;
  margin-bottom: 13px;
  .rechange-item {
    width: calc((100% - 5px * 4) / 3);
    height: 53px;
    border: 1px solid #cccccc;
    border-radius: 6px;
    font-size: 18px;
    font-family: Source Han Sans SC;
    font-weight: 400;
    color: #000000;
    margin-right: 10px;
    margin-bottom: 13px;
  }
  .rechange-item:nth-child(3n) {
    margin-right: 0;
  }
}
.moreRechange {
  width: 300px;
  height: 44px;
  border-radius: 22px;
  font-size: 16px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #ffffff;
  margin: 0 auto;
}
.cartory-name {
  font-size: 16px;
  font-family: PingFang SC;
  font-weight: bold;
  color: #000000;
  margin-bottom: 13px;
}
.activity-item {
  background-color: #ffffff;
  box-shadow: 0px 1px 41px 0px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  margin-bottom: 13px;
  padding-bottom: 16px;

  .pic-img {
    border-radius: 10px;
  }
  .activity-time {
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #888888;
  }
  .activity-name {
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #000000;
    margin: 16px 0px 10px;
  }
}
</style>